<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="x-rim-auto-match" content="none">
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <title>注册</title>
    <script type="text/javascript" src="/js/assets/jquery-3.1.0.min.js"></script>
    <style>
        *{
            margin:0;
            padding:0;
            box-sizing: border-box;
        }
        input{
            background: transparent;
            -webkit-tap-highlight-color:rgba(255,255,255,0);
            -webkit-appearance:none;
        }
        @media only screen and (min-width:320px) and (orientation:portrait){
            input{font-size:14px;!important;}


        }
        @media only screen and (min-width:360px) and (orientation:portrait){
            input{font-size:15px;!important;}

        }
        @media only screen and (min-width:414px) and (orientation:portrait){
            input{font-size:16px;!important;}
        }

        @media only screen and (min-width:600px) and (orientation:portrait){
            input{font-size:20px;!important;}
        }

        @media only screen and (min-width:768px) and (orientation:portrait){
            input{font-size:24px;!important;}
        }
        #recharge{
            display: block;
            position: absolute;
        }
        .downLoad{
            display: block;
            position: absolute;
        }
    </style>

</head>
<body style="margin: 0">
<div id='bgPic' style="background: url('../img/register_02.png') no-repeat center;background-size: 100% 100%;width: 100%;position: relative">
    <a name="down"></a>
    <input id="phone" placeholder="请输入您的手机号码" type="text" style="outline:none;color: #b7bcd8;border: none;" maxlength="11" />
    <input id="picture" placeholder="请输入图片验证码" type="text" style="outline:none;float: left;color: #b7bcd8;border: none" />
    <div id="obtain" style="float: left;">
        <img src="/sys/ImageServlet" id="validImg" style="cursor:pointer;"/>
    </div>
    <input id="phoneCord" placeholder="请输入验证码" type="text" style="outline:none;float: left;color: #b7bcd8;border: none" />
    <input id="clickMes" type="button" value="获取验证码" style="outline:none;color: #ffeccf;float: left;background: none;border: none">


    <a id="recharge" style="cursor:pointer;"></a>
    <!--<div style="width: 61%;height: 80px;margin-top: 2367px;margin-left: 18%;cursor:pointer;"></div>-->
    <a class='downLoad' href="#down"></a>
</div>
</body>
<script>


    var w = document.documentElement.clientWidth;

    var bodyW=w+'px';
    $('body').width(bodyW);

    var bgPic=document.querySelector('#bgPic');
    var he=2873*w/750+'px';
    bgPic.style.height=he;


    $('#phone').css('width',480/750*w+'px');
    $('#phone').css('height',91/750*w+'px');
    //    $('#phone').css('lineHeight',105/750*w+'px');
    $('#phone').css('margin-top',950/750*w+'px');
    $('#phone').css('margin-left',136/750*w+'px');

    $('#picture').css('width',300/750*w+'px');
    $('#picture').css('height',91/750*w+'px');
    $('#picture').css('margin-top',50/750*w+'px');
    $('#picture').css('margin-left',136/750*w+'px');

    $('#obtain').css('width',170/750*w+'px');
    $('#obtain').css('height',91/750*w+'px');
    $('#obtain').css('lineHeight',91/750*w+'px');
    $('#obtain').css('margin-top',40/750*w+'px');
    $('#obtain').css('margin-left',50/750*w+'px');

    $('#validImg').css('width',168/750*w+'px');
    $('#validImg').css('height',80/750*w+'px');
    $('#validImg').css('lineHeight',80/750*w+'px');
    $('#validImg').css('margin-top',10/750*w+'px');


    $('#phoneCord').css('width',300/750*w+'px');
    $('#phoneCord').css('height',105/750*w+'px');
    //    $('#phoneCord').css('lineHeight',105/750*w+'px');
    $('#phoneCord').css('margin-top',40/750*w+'px');
    $('#phoneCord').css('margin-left',136/750*w+'px');

    $('#clickMes').css('width',200/750*w+'px');
    $('#clickMes').css('height',105/750*w+'px');
    $('#clickMes').css('lineHeight',105/750*w+'px');
    $('#clickMes').css('margin-top',40/750*w+'px');
    $('#clickMes').css('margin-left',35/750*w+'px');

    $('#recharge').css('width',632/750*w+'px');
    $('#recharge').css('height',100/750*w+'px');
    $('#recharge').css('lineHeight',100/750*w+'px');
    $('#recharge').css('margin-top',365/750*w+'px');
    $('#recharge').css('margin-left',56/750*w+'px');

    $('.downLoad').css({'width':185/750*w+'px','height':180/750*w+'px','bottom':209/750*w+'px','left':280/750*w+'px'});


    function Trim(str,is_global)
    {
        var result;
        result = str.replace(/(^\s+)|(\s+$)/g,"");
        if(is_global.toLowerCase()=="g")
        {
            result = result.replace(/\s/g,"");
        }
        return result;
    }

    var href=Trim(decodeURI(window.location.href),'g');
    var invite='';
    var inviteString='';
    if(href.indexOf('invite')!=-1){
        inviteString=href.split('invite=')[1];
        if(inviteString.indexOf('&')!=-1){
            invite=inviteString.split('&')[0];
        }else{
            invite=inviteString;
        }
    }


    var source='';
    if(href.indexOf('source')!=-1){
        source=href.split('source=')[1];
    }
    //点击获取验证码
    $('#validImg').click(function(){
        $("#validImg").attr("src","/sys/ImageServlet?time="+new Date());
    });


    $('#clickMes').click(function () {

        var phone=$('#phone').val();
        var picture=$('#picture').val();
        $.ajax({
            type: 'post',
            url: "/weixinRegisterSendSms",
            dataType: 'json',
            data: {
                pictureCode:picture,
                mobile:phone
            },
            success: function(data) {
                console.info(data);
                if(data.result=='success'){
                    time($('#clickMes'));
                }else{
                    alert(data.messageText);
                    $('#validImg').click();
                }

            },
            error: function(e) {

            }
        });
    });


    $('#recharge').bind('click',function(){
        var phone=$('#phone').val();
        var picture=$('#picture').val();
        var phoneCord=$('#phoneCord').val();
        if(phone==''){
            alert('请输入手机号');
            return;
        }
        else if(picture==''){
            alert('请输入图片验证码');
            return;
        }
        else if(phoneCord==''){
            alert('请输入验证码');
            return;
        }
        $.ajax({
            type: 'post',
            url: "/register/weixinRegister",
            dataType: 'json',
            data: {
                pictureCode:picture,
                mobile:phone,
                mobileCode:phoneCord,
                invite:invite,
                source:source
            },
            success: function(data) {
//                console.info(data);
                if(data.result=='success'){
                    $('html,body').animate({'scrollTop':he},500);
                    var a = document.createElement('a');
                    a.setAttribute('href', '/html/success.html');
                    // 防止反复添加
                    a.click();
                }else{
                    alert(data.messageText);
                    $('#validImg').click();
                }

            },
            error: function(e) {

            }
        });
    });



    var wait=60;
    function time(o) {
        if (wait == 0) {
            o.removeAttr("disabled");
            o.val('获取验证码');
            o.css("color", '#ffffff');

            wait = 60;
        } else {
            o.attr("disabled", true);
            o.css("color", '#fff');
            o.val( wait + "s");
            wait--;
            setTimeout(function() {
                        time(o)
                    },
                    1000)
        }
    }

</script>

<script>
    var _hmt = _hmt || [];
    (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?04655570a7f6ba29233f7e34e328d5bb";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script>
</html>